<template>
  <div class="student-aboutUs">
    <div class="aboutUs-card-list">
      <a-card hoverable style="width: 280px" class="add">
        <a-button class="new-btn" type="dashed" @click="toggleDrawer">
          <a-icon type="plus" />
        </a-button>
      </a-card>
      <a-card style="width: 280px" v-for="item in aboutUsList" :key="item.id">
        <p>id：{{ item.id }}</p>
        <p>公司文化：{{ item.culture }}</p>
        <p>公司宗旨：{{ item.purpose }}</p>
        <p>公司地址：{{ item.address }}</p>
        <p>联系方式：{{ item.contact }}</p>
        <p>发展历程：{{ item.development }}</p>
        <template slot="actions" class="ant-card-actions">
          <a-icon key="del" type="delete" @click="showDelModal(item.id)" />
          <a-icon key="edit" type="edit" @click="edit(item)" />
        </template>
      </a-card>
    </div>
    <a-drawer
      :title="drawerTitle"
      :width="620"
      :visible="visibleDrawer"
      :body-style="{ paddingBottom: '80px' }"
      @close="toggleDrawer"
    >
      <a-form :form="form" layout="vertical">
        <a-form-item
          :label="item.title"
          v-for="item in columns"
          :key="item.key"
        >
          <a-textarea
            :auto-size="{ minRows: 2, maxRows: 4 }"
            v-if="item.inputType == 'textarea'"
            v-model="inputForm[`${item.key}`]"
          />
          <a-input v-else v-model="inputForm[`${item.key}`]"> </a-input>
        </a-form-item>
      </a-form>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 1,
        }"
      >
        <a-button type="primary" @click="submit"> 提交 </a-button>
      </div>
    </a-drawer>
    <a-modal
      centered
      title="此操作不可逆！"
      v-model="delModalVisible"
      @ok="delOk"
      @cancel="delNo"
    >
      <p>确认删除？</p>
    </a-modal>
  </div>
</template>

<script>
import {
  addAboutUsApi,
  editAboutUsApi,
  delAboutUsApi,
  getAboutUsListApi,
} from '@/services/webApi/aboutUs';

export default {
  data() {
    return {
      columns: [
        {
          title: '公司文化',
          dataIndex: 'culture',
          key: 'culture',
          inputType: 'textarea',
        },
        {
          title: '公司宗旨',
          dataIndex: 'purpose',
          key: 'purpose',
          inputType: 'textarea',
        },
        {
          title: '公司地址',
          dataIndex: 'address',
          key: 'address',
          inputType: 'input',
        },
        {
          title: '联系方式',
          dataIndex: 'contact',
          key: 'contact',
          inputType: 'input',
        },
        {
          title: '发展历程',
          dataIndex: 'development',
          key: 'development',
          inputType: 'textarea',
        },
      ],
      inputForm: {},
      form: this.$form.createForm(this),
      visibleDrawer: false,
      aboutUsList: [],
      currentId: '',
      drawerTitle: '新增',
      delModalVisible: false,
    };
  },
  created() {
    this.getAboutUsList();
  },
  methods: {
    submit() {
      if (
        !this.inputForm.culture ||
        !this.inputForm.purpose ||
        !this.inputForm.address ||
        !this.inputForm.contact ||
        !this.inputForm.development
      ) {
        this.$message.error('内容不能为空');
        return;
      }
      if (this.currentId) {
        this.editAboutUs();
      } else {
        this.addAboutUs();
      }
      setTimeout(() => {
        this.visibleDrawer = false;
      }, 1000);
    },
    edit(item) {
      this.inputForm = item;
      this.visibleDrawer = true;
      this.currentId = item.id;
      this.drawerTitle = `当前编辑id：${item.id}`;
    },
    toggleDrawer() {
      this.visibleDrawer = !this.visibleDrawer;
      this.drawerTitle = '新增';
      this.inputForm = {};
    },
    showDelModal(id) {
      this.delModalVisible = true;
      this.currentId = id;
    },
    delOk() {
      delAboutUsApi({ id: this.currentId })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success('删除成功', 1.5);
            this.currentId = '';
          }
          this.getAboutUsList();

          setTimeout(() => {
            this.delModalVisible = false;
          }, 1000);
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    delNo() {
      this.delModalVisible = false;
      this.currentId = '';
    },
    getAboutUsList() {
      getAboutUsListApi()
        .then((res) => {
          if (res.code == 200) {
            this.aboutUsList = res.data;
          }
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    addAboutUs() {
      addAboutUsApi(this.inputForm)
        .then((res) => {
          if (res.code == 200) {
            this.visibleDrawer = !this.visibleDrawer;
            this.$message.success('添加成功', 1.5);
            this.getAboutUsList();
            this.inputForm = {};
          }
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
    editAboutUs() {
      editAboutUsApi({ ...this.inputForm, id: this.currentId })
        .then((res) => {
          if (res.code == 200) {
            this.visibleDrawer = !this.visibleDrawer;
            this.$message.success('修改成功', 1.5);
            this.getAboutUsList();
          }
          this.currentId = '';
        })
        .catch((err) => {
          this.$message.error(err, 1.5);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.aboutUs-card-list {
  display: flex;
  flex-wrap: wrap;
  .ant-card {
    margin-right: 15px;
    margin-bottom: 15px;
    position: relative;
    ::v-deep .ant-card-actions {
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
  .add {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    .new-btn {
      border-radius: 2px;
      width: 220px;
      height: 220px;
      .anticon {
        font-size: 40px;
      }
    }
  }
  p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    &:last-child {
      margin-bottom: 40px;
    }
  }
}
</style>
